<template>
	<view>
		<comp-common v-bind="{data:data}"></comp-common>
		<comp-header v-bind="{data:data}"></comp-header>
		<comp-quick-navigation v-bind="{data:data}"></comp-quick-navigation>
		<view class="body after-navber">
			<swiper :autoplay="autoplay" :duration="duration" :indicatorDots="autoplay" :interval="interval" style="height:280upx"
			 v-if="data.banner_list.length>0">
				<swiper-item v-for="(banitem,bindex) in data.banner_list" :key="banitem.id">
					<navigator @click="navigatorClick" :data-open_type="banitem.open_type" :data-url="banitem.page_url" hoverClass="none"
					 :openType="banitem.open_type?item.open_type:'navigate'" :url="banitem.page_url">
						<image mode="aspectFill" :src="banitem.pic_url" style="width:100%;height:280upx"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="no-content" v-if="!data.new_list||data.new_list.length==0">暂无记录</view>
		<view style="padding-bottom:96upx;" v-else>
			<view style="background:#fff" v-for="(newitem,index) in data.new_list" :data-index="index" :key="index">
				<view style="height:20upx;background:#f7f7f7"></view>
				<view class="flex-row" style="position:relative;padding:24upx">
					<navigator hoverClass="navigator-hover" style="display:inline" :url="'/lottery/goods/goods?id='+newitem.id">
						<image class="flex-grow-0" :src="newitem.goods.cover_pic" style="display:block;width:220upx;height:220upx"></image>
						<view class="flex-x-center flex-y-center lottery-num">{{newitem.num}}人参与</view>
					</navigator>
					<view class="flex-col flex-grow-1" style="padding-left:24upx;">
						<navigator hoverClass="navigator-hover" style="display:inline" :url="'/lottery/goods/goods?id='+newitem.id">
							<view class="text-more-2">{{newitem.goods.name}}</view>
							<view class="flex-row flex-y-center font-minor">
								<image src="../../static/lottery/lottery_time.png" style="margin-right:12upx;width:24upx;height:24upx;display:block"></image>距活动结束：
								<text v-if="data.time_list[index].day>0||data.time_list[index].hour>0">
									<text class="red">{{data.time_list[index].day}}</text>天</text>
								<text v-if="data.time_list[index].day>0||data.time_list[index].hour>0">
									<text class="red">{{data.time_list[index].hour}}</text>小时</text>
								<text v-if="data.time_list[index].day==0&&data.time_list[index].hour==0">
									<text class="red">{{data.time_list[index].minute}}</text>分</text>
								<text v-if="data.time_list[index].day==0&&data.time_list[index].hour==0">
									<text class="red">{{data.time_list[index].second}}</text>秒</text>
							</view>
							<view class="font-minor" style="padding-top:10upx;padding-right:10upx">共{{newitem.stock}}份</view>
						</navigator>
						<view class="flex-row flex-y-center">
							<view class="flex-grow-0 red">￥0</view>
							<view class="flex-grow-1 font-minor" style="text-decoration:line-through;padding-left:12upx">原价￥{{newitem.original_price}}</view>
							<form @submit="submit" :data-lottery_id="newitem.id" data-type="navigate" reportSubmit="true" v-if="newitem.status">
								<button formType="submit" id="lotterySubmit">
									<view class="flex-y-center flex-x-center flex-grow-0 lottery-btn">立即抽奖</view>
								</button>
							</form>
							<view class="flex-y-center flex-x-center flex-grow-0 lottery-err btn-disabled" v-else>已参与</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<com-naver v-bind="{data:data}"></com-naver>
		<comp-footer v-bind="{data:data}"></comp-footer>

	</view>
</template>

<script>var myVue = this;
	import comNaver from "../commons/naver/naver.vue"
	var is_loading = !1,
		is_no_more = !0,
		interval_list = !1;

	export default {
		components:{
			comNaver
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 1000,
				data: {
					p: 1,
					naver: "index",
					new_list: {
						
					},
					banner_list: {},
					time_list: {}

				}

			};
		},
		onLoad: function(t) {myVue = this;
			myVue.getApp.page.onLoad(this, t);
		},
		onShow: function() {
			console.log("Lottery onShow");
			myVue.getApp.page.onShow(this),
				myVue.getApp.core.showLoading({
					title: "加载中"
				});
			var e = this;
			e.data.p = 1,
				e.getApp.request({
					url: myVue.getApp.api.lottery.index,
					success: function(t) {
						console.log(t.data);
						if (0 == t.code) {
							e.setData(t.data),

								null != t.data.new_list && 0 < t.data.new_list.length && (is_no_more = !1);
							var i = [];
							t.data.new_list.forEach(function(t, e, a) {
								i.push(t.end_time);
							}), e.setTimeStart(i);
						}
					},
					complete: function(t) {
						e.getApp.core.hideLoading();
					}
				}),
				e.getApp.request({
					url: myVue.getApp.api.lottery.setting,
					success: function(t) {
						if (0 == t.code) {
							var e = t.data.title;
														e && myVue.getApp.core.setNavigationBarTitle({
															title: e
														});
						}
					}
				});
		},
			onReachBottom: function() {
				is_no_more || this.loadData();
			},
			onShareAppMessage: function() {
				myVue.getApp.page.onShareAppMessage(this);
				return {
					path: "lottery/index/index?user_id=" + this.data.__user_info.id,
					success: function(t) {}
				};
			},
		methods: {
			setTimeStart: function(t) {
				var e = this,
					d = [];
				clearInterval(interval_list), interval_list = setInterval(function() {
					t.forEach(function(t, e, a) {
						var i = new Date(),
							n = parseInt(t - i.getTime() / 1e3);
						if (0 < n)
							var o = Math.floor(n / 86400),
								r = Math.floor(n / 3600) - 24 * o,
								s = Math.floor(n / 60) - 24 * o * 60 - 60 * r,
								l = Math.floor(n) - 24 * o * 60 * 60 - 60 * r * 60 - 60 * s;
						var p = {
							day: o,
							hour: r,
							minute: s,
							second: l
						};
						d[e] = p;
					}), e.setData({
						time_list: d
					});
				}, 1e3);
			},
			submit: function(t) {
				var e = t.detail.formId,a = t.currentTarget.dataset.lottery_id;
				myVue.getApp.core.navigateTo({
					url: "/lottery/detail/detail?lottery_id=" + a + "&form_id=" + e
				});
			},
			loadData: function() {
				var a = this,
					n = a.data.p + 1;
				if (!is_loading) {
					is_loading = !0, a.getApp.core.showLoading({
						title: "加载中"
					});

					a.getApp.request({
						url: myVue.getApp.api.lottery.index,
						data: {
							page: n
						},
						success: function(t) {
							if (0 == t.code) {
								var e = a.data.new_list;
								if (null == t.data.new_list || 0 == t.data.new_list.length) return void(is_no_more = !0);
								e = e.concat(t.data.new_list), a.setData({
									new_list: e,
									p: n
								});
								var i = [];
								e.forEach(function(t, e, a) {
									i.push(t.end_time);
								}), a.setTimeStart(i);
							} else a.showToast({
								title: t.msg
							});
						},
						complete: function(t) {
							a.getApp.core.hideLoading(), is_loading = !1;
						}
					});
				}
			},



		},
		onHide: function() {
			myVue.getApp.page.onHide(this), clearInterval(interval_list);
		},
		onUnload: function() {
			myVue.getApp.page.onUnload(this), clearInterval(interval_list);
		},

	}
</script>

<style scoped>

	@import "../__wuBaseWxss__/0.css";

	.lottery-btn {
		color: #ffffff;
		background: #ff4544;
		height: 56upx;
		width: 160upx;
		border-radius: 28upx;
	}

	.lottery-err {
		height: 56upx;
		width: 160upx;
		border-radius: 28upx;
	}

	.lottery-num {
		position: absolute;
		top: 24upx;
		left: 24upx;
		z-index: 1;
		padding: 0 12upx;
		background: #ffe4e7;
		height: 40upx;
		border-radius: 0 25upx 25upx 0;
		font-size: 9pt;
		color: #ff4555;
	}

	.no-content {
		color: #888;
		padding: 100upx 0 0 0;
		text-align: center;
	}

	button#lotterySubmit {
		display: block !important;
		background: none !important;
		height: auto !important;
		width: 100% !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		line-height: inherit !important;
		font-family: inherit !important;
		color: inherit !important;
		text-align: inherit;
	}

	button#lotterySubmit:before,
	button#lotterySubmit:after {
		border-radius: 0 !important;
		border: none !important;
	}
</style>
